<div ng-if="networking.rowServices | size" class="expanded-section networking-section">
  <div class="section-title hidden-xs">Networking</div>
  <div ng-repeat="service in networking.rowServices" class="row">
    <div class="col-sm-5 col-md-6">
      <div class="component-label">
        Service
        <span class="sublabel">Internal Traffic</span>
      </div>
      <h3>
        <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
      </h3>
      <span ng-repeat="portMapping in service.spec.ports | limitTo : 1">
        {{portMapping.port}}/{{portMapping.protocol}} <span ng-if="portMapping.name">({{portMapping.name}})</span>
        <i class="fa fa-long-arrow-right text-muted"></i>
        {{portMapping.targetPort}}
      </span>
      <span ng-if="service.spec.ports.length >= 2">
        and
        <span class="nowrap">
          {{service.spec.ports.length - 1}}
          <span ng-if="service.spec.ports.length > 2">others</span>
          <span ng-if="service.spec.ports.length === 2">other</span>
        </span>
      </span>
    </div>
    <div class="col-sm-7 col-md-6 overview-routes">
      <div class="component-label">
        Routes
        <span class="sublabel">External Traffic</span>
      </div>
      <div ng-if="networking.routesByService[service.metadata.name] | size">
        <div ng-repeat="route in networking.routesByService[service.metadata.name] | limitTo : 2 track by (route | uid)" class="overview-routes">
          <h3>
            <span ng-if="route | isWebRoute">
              <a ng-href="{{route | routeWebURL}}" target="_blank">
                {{route | routeLabel}}
                <i class="fa fa-external-link" aria-hidden="true"></i>
              </a>
            </span>
            <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
            <route-warnings route="route" services="networking.allServices"></route-warnings>
          </h3>
          <div class="overview-route">
            Route <a ng-href="{{route | navigateResourceURL}}">{{route.metadata.name}}</a><span ng-if="route.spec.port.targetPort">,
            target port {{route.spec.port.targetPort}}</span>
          </div>
          <div ng-if="route | hasAlternateBackends">
            <route-service-bar-chart route="route" highlight-service="service.metadata.name"></route-service-bar-chart>
          </div>
        </div>
      </div>
      <div ng-if="!(networking.routesByService[service.metadata.name] | size)">
        <a ng-if="'routes' | canI : 'create'" ng-href="project/{{service.metadata.namespace}}/create-route?service={{service.metadata.name}}">
          <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
          Create Route
        </a>
        <span ng-if="!('routes' | canI : 'create')" class="text-muted">No Routes</span>
      </div>
    </div>
  </div>
</div>
